<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>免费券核销</h3>
            </div>
            <div class="yuansdj">
              <div class="yuansdj_box">
                <div style="width:100px;line-height:40px">待核销券码</div>
                <el-input v-model="code"></el-input>
                <el-button @click="couponCode">确定</el-button>
              </div>
              <p style="text-align:center">请输入12345看效果</p>
              <div class="yuansdj_box_botm" v-if="hid">
                  <div>领取信息:</div>
                  <div>
                      <span class="heads">券码</span>
                      <span>{{code}}</span>
                  </div>
                  <div>
                      <span class="heads">领取时间</span>
                      <span>{{dates}}</span>
                  </div>
              </div>
              <div class="btn" @click="queding">确定核销</div>
              
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      code: "",
      dates:"2020-06-18",
      hid:false
    };
  },
  methods: {
    couponCode() {
        if(this.code==12345){
            this.hid=true
        }else{
            this.$message.error("无效券码,请核实后使用");
        }
      
    },
    queding() {
        if(this.hid){
            this.$message({
        message: "恭喜你，核销成功",
        type: "success"
      });
        }else{
           this.$message.error("请先输入有效券码,在确定核销"); 
        }
      
    }
  }
};
</script>
<style scoped lang="stylus">
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

.back {
  background-color: #f06048;
}

.pxes {
  height: 15px;
}

.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}

.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}

.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}

.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  margin-top: 15px;
  padding-bottom: 10px;
  text-align: center;
}

.yuansdj_box {
  display: flex;
  width: 600px;
  margin: 30px auto;
}

.btn {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: solid 1px rgb(220, 220, 220);
  margin: 20px auto;
}
.yuansdj_box_botm{
    width 300px
    margin 0 auto
}
.yuansdj_box_botm div:nth-child(1){
    width 100px
}
.yuansdj_box_botm div{
    height 30px
}
.heads{
    margin-left 100px
}
</style>